<!--
 * @Author: hye0228 1261769443@qq.com
 * @Date: 2022-10-12 12:55:29
 * @LastEditors: hye0228 1261769443@qq.com
 * @LastEditTime: 2022-10-14 16:33:29
 * @FilePath: \v2.0.0\src\components\MyQuery.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-row :gutter="10">
    <template v-if="options.length > 0">
      <template v-for="item in options" :key="item.prop">
        <el-col :span="6" class="mb-2">
          <CustomRender
            v-if="item.customRender"
            v-model="params[item.prop]"
            :render="item.customRender"
          ></CustomRender>
          <el-input
            v-else
            v-model="params[item.prop]"
            prefix-icon="Search"
            :placeholder="item.placeholder"
            clearable
          ></el-input>
        </el-col>
      </template>
    </template>
    <slot v-else></slot>
    <el-col :span="6" class="mb-2">
      <el-button type="primary" @click="handleQuery">查询搜索</el-button>
      <el-button @click="handleReset">重置查询</el-button>
    </el-col>
  </el-row>
</template>
<script setup>
import { toRefs } from "vue";
import CustomRender from "./CustomRender.jsx";

const props = defineProps({
  params: {
    type: Object,
    default: () => ({}),
  },
  options: {
    type: Array,
    default: () => [],
  },
});
const { params } = toRefs(props);

const emit = defineEmits(["query", "reset"]);

function handleQuery() {
  emit("query");
}

function handleReset() {
  emit("reset");
}
</script>
